<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    <style>
        .nav{
            float: left;
            border: solid #9c9398 1px;
            background: #d8d8d8;
            height: 150px;
        }
        .nav a{
            display: block;
            padding: 10px;
        }
    </style>
</head>
<body>

<div id="app">
    <!--左侧导航栏区域-->
    <div class="nav">
        <router-link to="/java">
            java技术
        </router-link>
        <router-link to="/python">
            python技术
        </router-link>
        <router-link to="/javascript">
            javascript技术
        </router-link>
    </div>

    <!--右侧内容区域-->
    <div class="content">
        <router-view></router-view>
    </div>
</div>
<script>
    //1.java技术 对应的视图组件
    const javaComponent = {
        template: `<div>
                这里是《java技术》教程
              </div>`
    };

    //2python技术 对应的视图组件
    const pythonComponent = {
        template: `<div>
                这里是《python技术》教程
              </div>`
    };

    //3.javascript技术 对应的视图组件
    const javascriptComponent = {
        template: `<div>
                这里是《javascript技术》教程
              </div>`
    };
    //创建router实例，并定义导航和组件的映射关系
    const router = new VueRouter({
        //配置routes
        routes: [
            //定义3个导航和组件的映射关系
            {
                path: "/java",
                component: javaComponent
            },
            {
                path: "/python",
                component: pythonComponent
            },
            {
                path: "/javascript",
                component: javascriptComponent
            },
        ]
    });
    const app = new Vue({
        el: "#app",
        router //router:router
    });
</script>

</body>
</html>